<template>
	<div class="search-list">
		<el-row :gutter="20">
			<el-col :span="24">
				<el-form-item :label="labelName" :label-width="GLOBAL.formLabelWidth" :prop="propVal">
					<el-input v-model="val" autocomplete="off" :placeholder="'请填写'+ labelName" style="width: 360px;" @input="inputChange">
						<el-button slot="append" icon="el-icon-search" @click.stop="searchTable"></el-button>
					</el-input>
					<div class="text-area">
						<el-tag v-for="(tag,index) in tags" :key="index" closable type="info" style="margin-right: 10px;" @close="handleClose(tag)">
							{{tag.name}}
						</el-tag>
					</div>
				</el-form-item>
			</el-col>
		</el-row>

		<el-dialog :title="labelName" :visible.sync="dialogTableVisible" center width="1000px" append-to-body class="inner-dialog" :close-on-click-modal='false'>
			<el-table :data="tableData" @selection-change="handleSelectionChange" ref="table">
				<el-table-column type="selection" width="55" align="center">
				</el-table-column>
				<el-table-column type="index" label="序号" align="center"></el-table-column>
				<el-table-column label="姓名" align="center" prop="name">
				</el-table-column>
				<el-table-column label="性别" align="center" prop="sex">
				</el-table-column>
				<el-table-column label="手机号" align="center" prop="phone">
				</el-table-column>
				<el-table-column label="身份" align="center" prop="type" :filters="[{ text: '党员', value: 1 }, { text: '群众', value: 2 },{text:'预备党员',value:3}]"
				 :filter-method="filterTag">
				 <template slot-scope="scope">
					 <el-tag v-show="scope.row.identity_type == 1">党员</el-tag>
					 <el-tag type="success"  v-show="scope.row.identity_type == 2">群众</el-tag>
					 <el-tag type="info"  v-show="scope.row.identity_type == 3">预备党员</el-tag>
				 </template>
				</el-table-column>
				<el-table-column label="所在支部" align="center" prop="organization_name" width="280">
				</el-table-column>
			</el-table>
			<el-button type="primary" style="position: absolute;bottom: 20px;left: 20px;" @click.stop="addEvent">添加</el-button>
			<el-pagination :page-size="pagination.pageSize" @current-change="currentChange" :current-page="pagination.pageNumber"
			 style="padding-top: 20px" :page-sizes="pagination.pageSizes" :total="pagination.totalRows" :layout="pagination.layout"
			 @size-change='sizeChange'>
			</el-pagination>
		</el-dialog>
	</div>
</template>

<script>
	import { get_table_list } from "api/table"
	export default {
		props: ['labelName', 'propVal', 'tags', 'tagName','tableType','identity_type','organization_id'],
		data() {
			return {
				val: '',
				dialogTableVisible: false,
				multipleSelectionAll: [], // 所有选中的数据包含跨页数据
				multipleSelection: [], // 当前页选中的数据
				idKey: "id", // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
				tableData: [], // 表格数据
				pagination: {
					totalRows: 0, //总条数
					pageSize: 10, //每页显示条数
					pageSizes: [10, 20, 50],
					pageNumber: 1,
					layout: "total, sizes, prev, pager, next, jumper"
				},
				listQuery:{
					page:1,
					page_size:15,
					name:'',
				},
				methodUrl:''
			}
		},
		methods: {
			inputChange() {
				this.$emit('inputEvent', this.val, this.propVal)
			},
			handleClose(tag) {
				this.$emit('handleClose', tag, this.tagName)
			},
			filterTag(value, row) {
				return row.identity_type === value;
			},
			/* 模拟打开弹框所有书记 */
			searchTable() {
				this.pagination.pageNumber = 1;
				this.listQuery.name = this.val
				this.queryData(this.methodUrl)
				this.dialogTableVisible = true

			},
			/* 添加数据 */
			addEvent() {
				this.changePageCoreRecordData();
				if (this.multipleSelectionAll.length <= 0) {
					this.$message({
						message: '无勾选数据！',
						type: 'warning'
					});
					return;
				}
				this.$emit('handleChooseData', this.multipleSelectionAll,this.tagName);
				this.dialogTableVisible = false;
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			currentChange(val) {
				this.changePageCoreRecordData();
				this.pagination.pageNumber = val;
				this.queryData(this.methodUrl);
			},
			sizeChange(val) {
				this.changePageCoreRecordData();
				this.pagination.pageSize = val;
				this.queryData(this.methodUrl);
			},
			queryData(url) {
				get_table_list(url,this.listQuery).then(response => {
					 this.tableData = response.data.data.data;
					 this.pagination.totalRows =  response.data.data.total;
					 setTimeout(() => {
					   this.setSelectRow();
					 }, 20);
					 
				 }).catch(err => {
					  this.$message.error(err)
				});
			},
			/* 记忆选择核心方法 */
			changePageCoreRecordData() {
				// 标识当前行的唯一键的名称
				let idKey = this.idKey;
				let that = this;
				// 如果总记忆中还没有选择的数据，那么就直接取当前页选中的数据，不需要后面一系列计算
				if (this.multipleSelectionAll.length <= 0) {
					this.multipleSelectionAll = this.multipleSelection;
					return;
				}
				// 总选择里面的key集合
				let selectAllIds = [];
				this.multipleSelectionAll.forEach(row => {
					selectAllIds.push(row[idKey]);
				});
				let selectIds = [];
				// 获取当前页选中的id
				this.multipleSelection.forEach(row => {
					selectIds.push(row[idKey]);
					// 如果总选择里面不包含当前页选中的数据，那么就加入到总选择集合里
					if (selectAllIds.indexOf(row[idKey]) < 0) {
						that.multipleSelectionAll.push(row);
					}
				});
				let noSelectIds = [];
				// 得到当前页没有选中的id
				this.tableData.forEach(row => {
					if (selectIds.indexOf(row[idKey]) < 0) {
						noSelectIds.push(row[idKey]);
					}
				});
				noSelectIds.forEach(id => {
					if (selectAllIds.indexOf(id) >= 0) {
						for (let i = 0; i < that.multipleSelectionAll.length; i++) {
							if (that.multipleSelectionAll[i][idKey] == id) {
								// 如果总选择中有未被选中的，那么就删除这条
								that.multipleSelectionAll.splice(i, 1);
								break;
							}
						}
					}
				});
			},
			// 设置选中的方法
			setSelectRow() {
				if (!this.multipleSelectionAll || this.multipleSelectionAll.length <= 0) {
					return;
				}
				// 标识当前行的唯一键的名称
				let idKey = this.idKey;
				let selectAllIds = [];
				let that = this;
				this.multipleSelectionAll.forEach(row => {
					selectAllIds.push(row[idKey]);
				});
				this.$refs.table.clearSelection();
				for (var i = 0; i < this.tableData.length; i++) {
					if (selectAllIds.indexOf(this.tableData[i][idKey]) >= 0) {
						// 设置选中，记住table组件需要使用ref="table"
						this.$refs.table.toggleRowSelection(this.tableData[i], true);
					}
				}
			},
		},
		watch: {
			'value': {
				handler(newVal) {
					this.val = newVal
				},
				immediate: true,
				deep: true
			},
			'tableType':{
				handler(val){
					this.methodUrl = '/user';
					this.listQuery.is_online = val == '用户' ? 2 : 1;
					this.listQuery.identity_type = this.identity_type ? this.identity_type : '';	
				},
				immediate: true,
				deep: true
			},
			'tags':{
				handler(val) {
				    this.multipleSelectionAll = val
				},
				immediate: true,
				deep: true
			},
			'organization_id':{
				handler(val) {
				    this.listQuery.organization_id = val ? val[val.length - 1] : ''
				},
			}
		}
	}
</script>

<style lang="scss">
	.inner-dialog {
		.el-dialog .el-dialog__header {
			height: rem(100);
			line-height: rem(100);
			padding: 0;
			@extend %flex-center;
		}

	}

	.el-table-filter__bottom {
		height: rem(50) !important;
		@extend %flex-center;
	}


	@include component(search-list) {}
</style>
